<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"  import="rtos.TypeValue" import="java.util.ArrayList"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<html>
  <head>
   <title> Go Go </title>
   <script language="javascript" src="http://www.google.com/jsapi"></script>
   </head>
   <script type="text/javascript">
   function test(){
   var valueArr = new Array();
   var typeArr = new Array();
   
    
	
   <%
		ArrayList<TypeValue> tvArr = (ArrayList<TypeValue>)request.getAttribute("tvArr");
   		for(int i=0;i<tvArr.size();i++){
  			out.println("typeArr["+i+"]=\""+tvArr.get(i).getType()+"\"");			
  			out.println("valueArr["+i+"]=\""+tvArr.get(i).getValue()+"\"");
		}
   		
   %>
      function onLoadCallback() {
    	  var queryString = '';
          var dataUrl = '';
        if (dataUrl.length > 0) {
          var query = new google.visualization.Query(dataUrl);
          query.setQuery(queryString);
          query.send(handleQueryResponse);
        } 
        else {
             var jchxl='0:';
             var jchxp;
          var dataTable = new google.visualization.DataTable();
          dataTable.addRows(typeArr.length+1);
          dataTable.addColumn('number');
          for(i=0;i<valueArr.length;i++){
        	var weight = Number(valueArr[i]);
        	dataTable.setValue(i,0,weight);
        	if(i == valueArr.length-1){
        		dataTable.setValue(i+1,0,Number(valueArr[0]));
        	}
        	
			jchxl += '|' + typeArr[i];
		  }
          //alert(jchxl);
          //alert(jchxp);
         draw(dataTable,jchxl);
      	}
      }
      
      function draw(dataTable,test) {
        var vis = new google.visualization.ImageChart(document.getElementById('chart'));
        var options = {
          chxl: test,
          chxp: '1,0,10,20,30,40,50,60,70,80,90,100',
          chxr: '',
          chxs: '',
          chxtc: '',
          chxt: 'x,y',
          chs: '400x400',
          cht: 'r',
          chco: '',
          chd: '',
          chdl: '',
          chls: 'test',
          chds: '0,100',
          chm: 'B,FF000080,0,0,0'
        };
        vis.draw(dataTable, options);
      }
	
      function handleQueryResponse(response) {
        if (response.isError()) {
          alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
          return;
        }
        draw(response.getDataTable());
      }
      
      google.load("visualization", "1", {packages:["imagechart"]});
      google.setOnLoadCallback(onLoadCallback);
   }
   function test2(question){
	    var pieArr = new Array();
	    pieArr[0] = "jmh@5-cdj@4-kdy@3-ikh@1";
		pieArr[1] = "jmh@1-cdj@2-kdy@5-ikh@3";
		pieArr[2] = "jmh@6-cdj@1-kdy@6-ikh@3";
		pieArr[3] = "jmh@1-cdj@2-kdy@2-ikh@8";
	   
	   google.load("visualization", "1", {packages:["corechart"]});
	      google.setOnLoadCallback(drawChart);
	      function drawChart() {
	        var data = google.visualization.arrayToDataTable([
	          ['User', 'Favorite'],
	          [pieArr[question].split("-")[0].split("@")[0],  Number(pieArr[question].split("-")[0].split("@")[1])],
	          [pieArr[question].split("-")[1].split("@")[0],  Number(pieArr[question].split("-")[1].split("@")[1])],
	          [pieArr[question].split("-")[2].split("@")[0],  Number(pieArr[question].split("-")[2].split("@")[1])],
	          [pieArr[question].split("-")[3].split("@")[0],  Number(pieArr[question].split("-")[3].split("@")[1])]
	        ]);

	        var options = {
	          title: 'My Daily Activities'
	        };

	        var chart = new google.visualization.PieChart(document.getElementById('piechart'+question));
	        chart.draw(data, options);
	      }
   }
    </script>
   <script>
   test();
   for(i=0;i<4;i++){
	test2(i);
   }
   </script>
  <body>
  <center>
  <fieldset style="border:1px solid black; width:80%;">
  <legend style="font-weight: bold">Radarchart</legend>
  <div id="chart"></div>
  </fieldset>
  <fieldset style="border:1px solid black; width:80%;">
  <legend style="font-weight: bold">Piechart</legend>
  <table>
  <tr>
  <%
  for(int i=0;i<4;i++){
	 if(i!=0 && i%2==0){
		 out.println("</tr><tr>");
	 }
	 out.println("<td><div id=\"piechart"+i+"\"/></td>");
  }
  %>
  </tr>
  </table>
  </fieldset>
  </center>
  </body>
</html>


